
<template>
  <views class="gen_batch_log">
    <viewTitle :title="'批次查询'" :border="false"></viewTitle>
    <!-- 搜索栏  企业端-服务商端 -->
    <div class="search flex flexC">
      <!-- 批次编号-商户编号-商户名称-状态-提交时间 -->
      <el-form ref="form" label-width="auto" :inline="true">
        <div class="search_input flex flexR center">
          <div class="their_facilitator flex flexR center">
            <el-form-item label="业务批次号:">
              <el-input
                v-model="all.form.enterprise_order_sn"
                placeholder="请输入业务批次号"
                :clearable="true"
              ></el-input>
            </el-form-item>
          </div>
          <div class="bank_statement flex flexR center" v-if="this.$store.state.terrace==3">
            <el-form-item label="商户名称:">
              <el-input v-model="all.form.enterprise_name" placeholder="请输入商户名称" :clearable="true"></el-input>
            </el-form-item>
          </div>
          <div class="pay_state flex flexR center">
            <el-form-item label="状态:">
              <el-select v-model="all.form.status" clearable placeholder="请选择">
                <el-option
                  v-for="item in all.form.status_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        <!--</div>-->
      <!--</el-form>-->

      <!--<el-form ref="form" label-width="auto" :inline="true">-->
        <!--<div class="pay_btn flex flexR">-->
          <!-- 提交时间 -->
          <div class="pay_time flex flexR center">
            <el-form-item label="提交时间:">
              <el-date-picker
                v-model="all.form.create_time"
                type="datetimerange"
                align="right"
                :default-time="['0:00:00','23:59:59']"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </div>
          <!--<div class="pay_state flex flexR center">-->
            <!--<el-form-item label="来源:">-->
              <!--<el-select v-model="all.form.source" clearable placeholder="请选择">-->
                <!--<el-option-->
                  <!--v-for="item in all.form.source_list"-->
                  <!--:key="item.value"-->
                  <!--:label="item.label"-->
                  <!--:value="item.value"-->
                <!--&gt;</el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</div>-->
        </div>
      </el-form>

      <el-form ref="form" label-width="auto" :inline="true">
        <div class="pay_btn flex flexR">
          <!--&lt;!&ndash; 审核时间 &ndash;&gt;-->
          <!--<div class="pay_time pay_time1 flex flexR center" v-if="this.$store.state.terrace==3">-->
            <!--<el-form-item label="审核时间:">-->
              <!--<el-date-picker-->
                <!--v-model="all.form.check_time"-->
                <!--type="datetimerange"-->
                <!--align="right"-->
                <!--:default-time="['0:00:00','23:59:59']"-->
                <!--unlink-panels-->
                <!--range-separator="至"-->
                <!--start-placeholder="开始日期"-->
                <!--end-placeholder="结束日期"-->
                <!--:picker-options="pickerOptions"-->
              <!--&gt;</el-date-picker>-->
            <!--</el-form-item>-->
          <!--</div>-->
          <!-- 按钮（查询、重置、导出列表、录单）  录单属于服务商端 -->
          <el-form-item >
            <div class="flex flexR pay_btn_list">
              <el-button type="primary" icon="el-icon-search" @click="query">查看</el-button>
              <el-button @click="reset()" icon="el-icon-refresh">重置</el-button>
              <el-button type="danger" icon="el-icon-download" @click="exportExcel">导出列表</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="search_input flex flexR center">
      <div :style="{marginLeft:'15px'}" class="show-title-money flex flexR">
        <div class="flex flexR money_item">
          <div>交易笔数</div>
          <div class="price">{{pagination.extend.ext_num}}</div>
          <div>笔</div>
        </div>
        <div class="flex flexR money_item">
          <div>交易金额(元)</div>
          <div class="price">￥{{pagination.summy ? $splitK(pagination.summy) : ''}}</div>
        </div>
        <div class="flex flexR money_item">
          <div>失败笔数</div>
          <div class="price">{{pagination.extend.faild_num}}</div>
          <div>笔</div>
        </div>
        <div class="flex flexR money_item">
          <div>交易失败金额(元)</div>
          <div class="price">￥{{pagination.extend.faild_money ? $splitK(pagination.extend.faild_money) : 0}}</div>
        </div>
      </div>
    </div>
    <!-- 展示列表 -->
    <div class="table_list">
      <el-table
        border
        :data="all.tableData"
        style="width: 100%;max-width:none;"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        @row-click="clickRow"
        max-height="450"
      >
        <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="enterprise_sn" label="企业编号" ></el-table-column>
        <el-table-column
          prop="enterprise_name"
          label="企业名称"
        ></el-table-column>
        <el-table-column prop="enterprise_order_sn" label="业务批次号" ></el-table-column>

        <!--<el-table-column prop="source" label="来源" width="120"></el-table-column>-->
        <el-table-column prop="created_time" label="提交时间" ></el-table-column>
        <!--<el-table-column-->
          <!--:formatter="(row)=>{return row.check_time >0 ? this.$moment(row.check_time*1000).format('YYYY-MM-DD HH:MM:SS'):''}"-->
          <!--label="审核时间"-->
          <!--width="180"-->
        <!--&gt;</el-table-column>-->
        <el-table-column prop="count" label="汇总笔数" ></el-table-column>
        <el-table-column prop="total_money" label="汇总金额" ></el-table-column>
        <el-table-column prop="status_desc" label="状态" ></el-table-column>
        <el-table-column prop="zip" label="操作" fixed="right" >
          <div class="table_operation flex flexR" slot-scope="scope">
            <el-button type="primary" @click="toDetail(scope)" >详情</el-button>
            <el-button @click="toDown(scope)" v-if="''">下载</el-button>
          </div>
        </el-table-column>
      </el-table>
      <div class="paging flex flexR">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="total, sizes,prev, pager, next, jumper"
          @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
          @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>



<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      //    企业端    服务商端
      all: {
        form: {
          enterprise_order_sn: "", // 主次号
          create_time: [], // 时间数组
          created_time_start: "", // 创建开始时间
          created_time_end: "", // 创建结束时间
          pay_time: [], // 时间数组
          pay_time_start: "", // 创建开始时间
          pay_time_end: "", // 创建结束时间
          status: "", // 状态
          status_list: [
            {
              value: "0",
              label: "未审核"
            },
            {
              value: "1",
              label: "企业内部审核通过"
            },
            // {
            //   value: "2",
            //   label: "服务商审核通过"
            // },
            {
              value: "3",
              label: "已部分打款"
            },
            {
              value: "4",
              label: "已全部打款"
            },
            {
              value: "5",
              label: "审核不通过"
            }
          ], // 状态列表
          source: "", // 来源
          source_list: [
            {
              value: "0",
              label: "WEB"
            }
          ] // 来源列表
        },
        tableData: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      pagination: {
        page_start: 1,
        page_size: 10
      } // 分页
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    //实时计算要传输的编辑参数
    post_data() {
      let data = {},
        time_list = this.all.form.create_time || [];
      if (time_list && time_list.length > 0) {
        data.created_time_start = time_list[0]/1000;
        data.created_time_end = time_list[1]/1000;
      }
      time_list = this.all.form.check_time || [];
      if (time_list && time_list.length > 0) {
        data.check_time_start = time_list[0]/1000;
        data.check_time_end = time_list[1]/1000;
      }

      data.enterprise_order_sn = this.all.form.enterprise_order_sn; // 主次号
      data.enterprise_name = this.all.form.enterprise_name;

      data.status = this.all.form.status; // 状态
      data.source = this.all.form.source; // 来源

      data.pagination = this.pagination;
      return data;
    },
    ...mapGetters(["getButtonPermission"]),
    isLook() {
      return this.getButtonPermission[this.$route.path] &&
        this.getButtonPermission[this.$route.path].look
        ? 1
        : 0;
    }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 批次记录-详情
    toDetail(scope) {
      this.$toRoutePath({
        path: "/gen_batch_log/gen_batch_log_detail",
        edit: true,
        query: {
          enterprise_order_id: scope.row.enterprise_order_id
        }
      });
    },
    // 获取批次记录-列表
    getData() {
      // 企业端-批次列表
      if (this.$store.state.terrace == 1) {
        let data = this.$api.sendSync(
          this.$mapapi.e_getOrderList,
          this.post_data
        );
        if (data.code != 200 && data.code != 501) {
          this.$message.error(data.msg);
          return;
        }
        this.pagination = data.data.pagination || {};
        this.all.tableData = data.data.list || [];
        this.download_url = data.data.download_url;
        console.log("企业-批次列表", data);
      }
      // 服务商-批次列表
      if (this.$store.state.terrace == 3) {
        let data = this.$api.sendSync(
          this.$mapapi.f_orderBatchList,
          this.post_data
        );
        if (data.code != 200 && data.code !== 501) {
          this.$message.error(data.msg);
          return;
        }
        this.pagination = data.data.pagination || {};
        this.all.tableData = data.data.list || [];
        this.download_url = data.data.download_url;
        console.log("服务商-批次列表", data);
      }
    },
    //  重置
    reset() {
      this.all.form.enterprise_order_sn = ""; // 主次号
      this.all.form.create_time = []; // 时间数组
      this.all.form.created_time_start = ""; // 创建开始时间
      this.all.form.created_time_end = ""; // 创建结束时间
      this.all.form.status = ""; // 状态
      this.all.form.source = ""; // 来源
      this.all.form.enterprise_name = "";
      this.getData();
    },
    //   查询
    query() {
      this.getData();
    },
    exportExcel() {
      this.$import_excal(this.download_url || "");
    },
    // 下载
    toDown(data) {
      console.log("sss", data);
    }
  },
  created() {}
};
</script>


<style lang="less" :scope="true"  src="@/style/issuing/gen_batch_log.less" >
</style>
